<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>wmts</title>

    <link rel="stylesheet" type="text/css" href="../../lib/leaflet/1.9.4/leaflet.css" >
    <script type='text/javascript' src='../../lib/leaflet/1.9.4/leaflet-src.js'></script>
    <script type='text/javascript' src='../../lib/jquery/3.6.0/jquery-3.6.0.min.js'></script>
</head>
<body style="margin: 0">
<div id="map" style="width: 100vw; height: 100vh"></div>
<script>
    //以下地址为互联网测试地址，实际地址需要去内网系统查看

    //服务地址： 从个人中心-服务申请-已审核的服务-预览查看
    var wmtsUrl='http://10.140.90.136:9527/gw/geowebcache/service/wmts?service=WMTS&request=GetTile&version=1.0.0' +
        '&layer=影像注记_L7_18级202210_最终版&styles=&tilematrixSet=EPSG:4490_影像注记_L7_18级202210_最终版' +
        '&format=image/png&height=256&width=256&style=&tilematrix=EPSG:4490_影像注记_L7_18级202210_最终版:{TileMatrix}' +
        '&tilerow={TileRow}&tilecol={TileCol}&userId=1795354350359867394&serviceId=1734125133182201858' +
        '&groupId=1729017520876294144&groupType=1&areaCode=3501&tenantId=1801069202634108930&appId=weather'

    // leaflet wmts 切片坐标参数名为xyz ，所以需要替换下即可
    wmtsUrl = wmtsUrl.replace('{TileMatrix}', '{z}')
    wmtsUrl = wmtsUrl.replace('{TileRow}', '{y}')
    wmtsUrl = wmtsUrl.replace('{TileCol}', '{x}')

    //范围：从个人中心-服务申请-已审核的服务-预览查看
    var bounds = [
        [23.56910029963916, 115.85229491937514],
        [28.311239299953797, 120.70246906339662],
    ]

    //地图实例
    var map = L.map('map', {
        crs: L.CRS.EPSG4326,
        renderer: L.canvas(),
    })

    //服务 wmts 调用
    L.tileLayer(wmtsUrl, {
        maxZoom: 20,
        tileSize: 256,
        // bounds: bounds
    }).addTo(map)

    map.fitBounds(bounds)
</script>
</body>
</html>
